import React from "react";
import { useSelector } from "react-redux";
import { useNavigate, useSearchParams } from "react-router-dom";
import { ListItem } from "../../components";
import { RootState } from "../../store";
import { OrderState } from "../../store/user/userReducer";
import { NavBar } from "react-vant";

const Index: React.FC = () => {
  const [searchParams] = useSearchParams();
  const state = searchParams.get("state") || "全部订单";

  const orderList = useSelector((state: RootState) => state.user.orderList);
  const navigate = useNavigate();
  const list = orderList.filter((v) => {
    if (state === "全部订单") return true;
    return v.state === state;
  });

  return (
    <div>
      <NavBar title={state}></NavBar>
      <div className="order-list">
        {list.map((v) => {
          return (
            <div
              className="card-item"
              key={v.id}
              onClick={() => navigate("/order/" + v.id, { state: v })}
            >
              <h3 style={{ display: "flex", justifyContent: "space-between" }}>
                <span>{v.title}</span>
                <span>{v.state}</span>
              </h3>
              <div className="list">
                {v.projects.map((v) => {
                  return <ListItem {...v} key={v.id}></ListItem>;
                })}
              </div>
              <h3 style={{ display: "flex", justifyContent: "space-between" }}>
                <span style={{ color: "red" }}>￥：{v.price}</span>
                <span>{new Date(v.createDateTime).toLocaleString()}</span>
              </h3>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Index;
